<template>
  <ElDialog
    v-model="visible"
    title="二级认证"
    width="450px"
    top="4vh"
    :close-on-click-modal="false"
    @open="handleOpen"
    @close="handleClose"
  >
    <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="right">
      <ElRow :gutter="20">
        <ElCol :span="20">
          <ElFormItem label="密码" prop="loginPwd" label-width="80px">
            <ElInput
              v-model="form.loginPwd"
              placeholder="请输入密码"
              type="password"
              show-password
              autocomplete="off"
              show-word-limit
            />
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>

    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="handleClose">取消</ElButton>
        <ElButton type="primary" :loading="loading" @click="handleSubmit"> 确定 </ElButton>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
  import { ref, reactive,computed, nextTick } from 'vue'
  import { ElMessage } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'
  import { apiAuthOpenSafeUsingPost, GeoAreaVo } from '@/api'
 import { encrypt } from '@/utils/rsa'


  const emit = defineEmits(["refresh"]);

  // 响应式数据
  const formRef = ref<FormInstance>()

  const loading = ref(false)

  const areaPlanInfo = ref([])

  const areaPhoto = ref([])
  const visible = ref(false)

  const openDialog = () => {
    visible.value = true
  }

  const form = reactive({
  loginPwd: "",
  
  })

  defineExpose({
  openDialog
});

  // 表单验证规则
  const rules: FormRules = {
    loginPwd: [
      { required: true, message: '请输入二级认证密码', trigger: 'blur' },
    ],
  }

  const handleSubmit = async () => {
    if (!formRef.value) return

    try {
      await formRef.value.validate()

      loading.value = true
      form.loginPwd= encrypt(form.loginPwd)
    await apiAuthOpenSafeUsingPost({
        body: {
          ...form,
        }
      })
      ElMessage.success('认证成功')
      handleClose()
      emit('refresh')
    } finally {
      loading.value = false
    }
  }

  const handleOpen = () => {
    
  }

  const handleClose = () => {
    formRef.value?.resetFields()
    areaPlanInfo.value = []
    areaPhoto.value = []
    nextTick(() => {
      visible.value = false
    })
  }
</script>

<style lang="scss" scoped>
  :deep(.service-item) {
    .el-form-item__content {
      .el-form-item__error {
        margin-top: -12px;
        margin-left: 46px;
      }
    }
  }

  .dialog-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
</style>
